<script lang="ts" setup>
import type {
  WorkbenchProjectItem,
  WorkbenchQuickNavItem,
  WorkbenchTodoItem,
  WorkbenchTrendItem,
} from '@vben/common-ui';

import { ref } from 'vue';
import { useRouter } from 'vue-router';

import {
  AnalysisChartCard,
  WorkbenchHeader,
  WorkbenchProject,
  WorkbenchQuickNav,
  WorkbenchTodo,
  WorkbenchTrends,
} from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils';

import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';

const userStore = useUserStore();

// 这是一个示例数据，实际项目中需要根据实际情况进行调整
// url 也可以是内部路由，在 navTo 方法中识别处理，进行内部跳转
// 例如：url: /dashboard/workspace
const projectItems: WorkbenchProjectItem[] = [
  {
    color: '',
    content: 'AI智能筛选精准定位高意向客户，全渠道自动引流成交',
    date: '2021-04-01',
    group: 'DeepSeek',
    icon: 'svg:huikebao',
    title: '慧获客',
    url: '#',
  },
  {
    color: '#3fb27f',
    content: 'AI真人式自动回复互动，7×24小时智能响应转化商机。',
    date: '2021-04-01',
    group: 'DeepSeek',
    icon: 'svg:huigoutong',
    title: '慧沟通',
    url: '#',
  },
  {
    color: '#e18525',
    content: '全周期客户行为追踪，自动化高频触达激活沉默资源。',
    date: '2021-04-01',
    group: 'DeepSeek',
    icon: 'svg:huisuoke',
    title: '慧锁客',
    url: '#',
  },
  {
    color: '#bf0c2c',
    content: '行业定制化内容秒级生成，营销话术智能优化增效。',
    date: '2021-04-01',
    group: 'DeepSeek',
    icon: 'svg:huixiezuo',
    title: '慧写作',
    url: '#',
  },
  {
    color: '#00d8ff',
    content: 'AI健康档案动态分析，个性化管理方案精准触达。',
    date: '2021-04-01',
    group: 'DeepSeek',
    icon: 'svg:huijiankang',
    title: '慧健康',
    url: '#',
  },
  {
    color: '#EBD94E',
    content: '多维度用户画像解析，智能推荐最优转化路径。',
    date: '2021-04-01',
    group: 'DeepSeek',
    icon: 'svg:huidongni',
    title: '慧懂你',
    url: '#',
  },
];

// 同样，这里的 url 也可以使用以 http 开头的外部链接
const quickNavItems: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    icon: 'ion:home-outline',
    title: '首页',
    url: '/',
  },
  {
    color: '#bf0c2c',
    icon: 'ion:grid-outline',
    title: '仪表盘',
    url: '/dashboard',
  },
  {
    color: '#e18525',
    icon: 'ion:layers-outline',
    title: '组件',
    url: '/demos/features/icons',
  },
  {
    color: '#3fb27f',
    icon: 'ion:settings-outline',
    title: '系统管理',
    url: '/demos/features/login-expired', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
  },
  {
    color: '#4daf1bc9',
    icon: 'ion:key-outline',
    title: '权限管理',
    url: '/demos/access/page-control',
  },
  {
    color: '#00d8ff',
    icon: 'ion:bar-chart-outline',
    title: '图表',
    url: '/analytics',
  },
];

const todoItems = ref<WorkbenchTodoItem[]>([
  {
    completed: false,
    content: `创作10篇，主题为《如何小红书引流的爆款方法》。`,
    date: '2024-07-30 11:00:00',
    title: '文章创作',
  },
  {
    completed: true,
    content: `发布小红书文章。`,
    date: '2024-07-30 11:00:00',
    title: '文章发布',
  },
  {
    completed: false,
    content: `进行主题为小户型装修避坑的粉丝互动。 `,
    date: '2024-07-30 11:00:00',
    title: '与粉丝互动',
  },
  {
    completed: false,
    content: `进行主题为宝妈如何开展副业的粉丝互动。`,
    date: '2024-07-30 11:00:00',
    title: '与粉丝互动',
  },
  {
    completed: false,
    content: `进行主题为上班族如何开展副业的粉丝互动。 `,
    date: '2024-07-30 11:00:00',
    title: '与粉丝互动',
  },
]);
const trendItems: WorkbenchTrendItem[] = [
  {
    avatar: 'svg:avatar-1',
    content: `创作了一篇新的文章 <a>小户型装修如何避坑</a>`,
    date: '刚刚',
    title: '内容创作编辑',
  },
  {
    avatar: 'svg:avatar-2',
    content: `在小红书账号上发布了一篇新的文章 <a>如何进行项目优化？</a> `,
    date: '1个小时前',
    title: '内容发布工程师',
  },
  {
    avatar: 'svg:avatar-3',
    content: `8平米的小户型，如何进行装饰？`,
    date: '1天前',
    title: '内容互动咨询师',
  },
  {
    avatar: 'svg:avatar-4',
    content: `粉丝互动 <a>如何编写一个好文章</a> `,
    date: '2天前',
    title: '内容互动咨询师',
  },
  {
    avatar: 'svg:avatar-1',
    content: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
    date: '3天前',
    title: '皮特',
  },
  {
    avatar: 'svg:avatar-2',
    content: `关闭了问题 <a>如何运行项目</a> `,
    date: '1周前',
    title: '杰克',
  },
  {
    avatar: 'svg:avatar-3',
    content: `发布了 <a>个人动态</a> `,
    date: '1周前',
    title: '威廉',
  },

];

const router = useRouter();

// 这是一个示例方法，实际项目中需要根据实际情况进行调整
// This is a sample method, adjust according to the actual project requirements
function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
  if (nav.url?.startsWith('http')) {
    openWindow(nav.url);
    return;
  }
  if (nav.url?.startsWith('/')) {
    router.push(nav.url).catch((error) => {
      console.error('Navigation failed:', error);
    });
  } else {
    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
  }
}
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
    >
      <template #title>
        早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
      </template>
      <template #description> 今日晴，20℃ - 32℃！ </template>
    </WorkbenchHeader>
    <div class="w-full lg">


    </div>
    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="mr-4 w-full lg:w-3/5">
        <WorkbenchProject :items="projectItems" title="AI营销全旅程" @click="navTo" />
        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
      </div>
      <div class="w-full lg:w-2/5">
        <WorkbenchQuickNav
          :items="quickNavItems"
          class="mt-5 lg:mt-0"
          title="快捷导航"
          @click="navTo"
        />
        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
        <AnalysisChartCard class="mt-5" title="访问来源">
          <AnalyticsVisitsSource />
        </AnalysisChartCard>
      </div>


    </div>

  </div>
</template>
<style>
.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}
.icon {
  width: 100px;
  height: 100px;
}
.ripple {
  animation: ripple 1.5s infinite;
}
.wave {
  animation: wave 2s linear infinite;
}
@keyframes ripple {
  0% { r:0; opacity:1 }
  100% { r:8; opacity:0 }
}
@keyframes wave {
  50% { stroke-dasharray: 10 0; }
}
</style>
